<template>
  <div class="index_mainBody">
    <div class="pull_left add_top Inp">
      <span class="pull_left">标题:</span>
      <div class="pull_left">
        <el-input placeholder="请输入标题" v-model="templateTitile"></el-input>
      </div>
    </div>
    <div class="pull_left add_top Inp">
      <span class="pull_left">发布人:</span>
      <div class="pull_left">
        <el-input
          placeholder="请输入发布人"
          v-model="templateSender"
        ></el-input>
      </div>
    </div>

    <div class="btn-margin pull_left">
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="indexDictlistSearch()"
        >查询</el-button
      >
      <el-button type="primary" icon="el-icon-refresh-right" @click="reset()"
        >重置</el-button
      >
    </div>
    <div class="clear"></div>

    <div class="add_margin add_top pull_left">
      <el-button
        type="primary"
        slot="reference"
        icon="el-icon-notebook-2"
        @click="open"
        >全部标为已读</el-button
      >
    </div>
    <div class="clear"></div>

    <div class="add_margin">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column
          v-for="(item, index) in headData"
          :index="item.index"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
        >
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template>
            <span class="el-dropdown-link" @click="view()"> 查看 </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pull_right paging">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <!-- 查看 -->
    <div>
      <el-dialog
        title="通知消息"
        :visible.sync="dialogVisibleView"
        :append-to-body="true"
        width="50%"
        :before-close="handleClose"
      >
        <el-divider></el-divider>
        <div v-for="(item,index) of viewData" :key="index">
            <div v-html="item.item"></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleView = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<style>
.index_mainBody {
  background-color: white;
  padding: 24px;
}
.index_mainBody .Inp {
  line-height: 50px;
}
.Inp span {
  margin-right: 10px;
}
.Inp .el-input {
  width: 220px;
}
.btn-margin .el-button {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 3px;
}
.pull_left {
  float: left;
}
.pull_right {
  float: right;
}
.clear {
  clear: both;
}
.add_top {
  padding-left: 20px;
  padding-right: 20px;
}
.add_margin {
  margin-top: 6px;
}
.paging .el-input__inner {
  width: 100px;
}
</style>
 <script>
import {
  mineMessageTemplate,
  getMyAnnouncementSend,
} from "@/api/messagetempalte";
export default {
  data() {
    return {
      textarea: "",
      headData: [
        {
          prop: "templateTitile",
          label: "标题",
          width: "250",
        },
        {
          prop: "templateMsgCategory",
          label: "消息类型",
          width: "250",
        },
        {
          prop: "templateSender",
          label: "发布人",
          width: "500",
        },
        {
          prop: "templateSendTime",
          label: "发布时间",
        },
        {
          prop: "templatePriority",
          label: "优先级",
        },
        {
          prop: "templateReadFlag",
          label: "阅读状态",
        },
      ],
      dialogVisibleReadAll: false,
      tableData: [],
      multipleSelection: [],
      currentPage4: 1,
      issee: false,
      pageNo: 1,
      total: 0,
      pageSize: 10,
      templateTitile: "",
      templateMsgCategory: "",
      templateSender: "",
      templateSendTime: "",
      templatePriority: "",
      templateReadFlag: "",
      dialogVisibleView: false,
      viewData: [],
    };
  },

  mounted() {
    let _self = this;
    _self.indexDictlistSearch();
  },
  methods: {
    //重置
    reset() {
      let _self = this;
      _self.tableData = [];
      _self.templateTitile = "";
      _self.templateMsgCategory = "";
      _self.templateSender = "";
      _self.templateSendTime = "";
      _self.templatePriority = "";
      _self.templateReadFlag = "";
      _self.pageNo = 1;
      _self.pageSize = 10;
      _self.indexDictlistSearch();
    },
    //列表查询
    indexDictlistSearch() {
      let _self = this;
      _self.tableData = [];
      let data = {
        pageNo: _self.pageNo,
        pageSize: _self.pageSize,
        titile: _self.templateTitile,
        sender: _self.templateSender,
      };
      mineMessageTemplate(data).then((res) => {
        console.log(res.result.records);
        for (let index in res.result.records) {
          _self.tableData.push({
            templateTitile: res.result.records[index].titile,
            templateMsgCategory: res.result.records[index].msgCategory,
            templateSender: res.result.records[index].sender,
            templateSendTime: res.result.records[index].sendTime,
            templatePriority:
              res.result.records[index].priority == "H" ? "高" : "低",
            templateReadFlag:
              res.result.records[index].readFlag == 1 ? "已读" : "未读",
          });
        }
        _self.total = res.result.total;
      });
    },
    ishow() {
      let _self = this;
      _self.issee = !_self.issee;
    },
    open() {
      this.$confirm("是否全部标注已读?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "全部已读",
          });
        })
        .catch(() => {});
    },
    //分页
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      let _self = this;
      _self.pageSize = val;
      _self.indexDictlistSearch();
    },
    handleCurrentChange(val) {
      let _self = this;
      console.log(`当前页: ${val}`);
      _self.pageNo = val;
      _self.indexDictlistSearch();
    },
    //查看
    view() {
      let _self = this;
      _self.dialogVisibleView = true;
      let data = {
        pageNo: _self.pageNo,
        pageSize: _self.pageSize,
      };
      getMyAnnouncementSend(data).then((res) => {
        for (let item of res.result.records) {
          _self.viewData.push({
            item:item.msgContent,
          });
        }
      });
    },
  },
};
</script>